appDisplay: Give more horizontal space to control buttons

Before, the text of those buttons were truncated when the text exceeded
the fixed width we had in the CSS.
Now, we give more horizontal space to the control buttons to match
the maximum text length of all buttons.

https://bugzilla.gnome.org/show_bug.cgi?id=696307

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 25852cc8b42a3638a8580d53cbe62b36acfbc791..bcf4bfbfae05d3806ce60f7bd149ab8c361ae16f 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -891,12 +891,11 @@ StScrollBar StButton#vhandle:active {
 }
 
 .app-view-controls {
-    width: 250px;
     padding-bottom: 32px;
 }
 
 .app-view-control {
-    padding: 4px 16px;
+    padding: 4px 32px;
 }
 
 .search-display > StBoxLayout,

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 8cba94e5940c690686dce18cff39669e6752738e..144419cec6ec491a49712054d068dc6af8d41e89 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -336,6 +336,42 @@ const Views = {
     ALL: 1
 };
 
+const ControlsBoxLayout = Lang.Class({
+    Name: 'ControlsBoxLayout',
+    Extends: Clutter.BoxLayout,
+
+    /**
+     * Override the BoxLayout behavior to use the maximum preferred width of all
+     * buttons for each child
+     */
+    vfunc_get_preferred_width: function(container, forHeight) {
+        let maxMinWidth = 0;
+        let maxNaturalWidth = 0;
+        for (let child = container.get_first_child();
+             child;
+             child = child.get_next_sibling()) {
+             let [minWidth, natWidth] = child.get_preferred_width(forHeight);
+             maxMinWidth = Math.max(maxMinWidth, minWidth);
+             maxNaturalWidth = Math.max(maxNaturalWidth, natWidth);
+        }
+        let childrenCount = container.get_n_children();
+        let totalSpacing = this.spacing * (childrenCount - 1);
+        return [maxMinWidth * childrenCount + totalSpacing,
+                maxNaturalWidth * childrenCount + totalSpacing];
+    },
+
+    vfunc_set_container: function(container) {
+        if(this._styleChangedId) {
+            this._container.disconnect(this._styleChangedId);
+            this._styleChangedId = 0;
+        }
+        if(container != null)
+            this._styleChangedId = container.connect('style-changed', Lang.bind(this,
+                    function() { this.spacing = this._container.get_theme_node().get_length('spacing'); }));
+        this._container = container;
+    }
+});
+
 const AppDisplay = new Lang.Class({
     Name: 'AppDisplay',
 
@@ -379,9 +415,9 @@ const AppDisplay = new Lang.Class({
                                           x_expand: true, y_expand: true });
         this.actor.add(this._viewStack, { expand: true });
 
-        let layout = new Clutter.BoxLayout({ homogeneous: true });
-        this._controls = new St.Widget({ style_class: 'app-view-controls',
-                                         layout_manager: layout });
+        let layout = new ControlsBoxLayout({ homogeneous: true });
+        this._controls = new St.Widget({ style_class: 'app-view-controls' });
+        this._controls.set_layout_manager(layout);
         this.actor.add(new St.Bin({ child: this._controls }));